<!--
 * @Author: xiuquanxu
 * @Company: kaochong
 * @Date: 2020-12-21 22:10:43
 * @LastEditors: xiuquanxu
 * @LastEditTime: 2020-12-28 13:40:11
-->
<html>
    <meta charset="utf-8"/>
    <body>
        <h1>xss工具</h1>
        <p>你看起来工作很正常呀</p>
        <p>页面状态：</p>
        <p id="status">
 
        </p>
        <script type="text/javascript">
        // 关于xss
        // xss是利用浏览器自动执行用户插入的脚本进行攻击的方式
        // 1、 主要api包括：innerHTML、outerHTML、document.write()
        // 2、当innerHTML时候如果script他不会执行，但是写img标签就会自动执行，这样就可以造成攻击，outerHTML和document.write同理。为了不造成攻击如果是纯文本我们通常使用setAttribute这个Api进行设置。
        // 3、关于vue，首先vue有两种渲染，第一种渲染文本是{{ msg }}这种渲染文本实际触发的是textContext，第二种v-html这个时候调用的是innerHTML，这个时候就会触发自动执行脚本逻辑
        // 所以我们在用v-html时候我们通常要转义，例如:<img src="x">转移成&lt;img&nbsp;src="x"&gt;，这样在调用v-html时候就不会执行代码而得到正确内容
            setTimeout(() => {
                var ele = document.getElementById('status');
                ele.innerHTML = '开始获取数据， 发送ajax...';
                setTimeout(function() {
                    ele.innerHTML = '获取数据完成，渲染...';
                    var txt = "<img src='x' onerror=alert('你被攻击了')>"
                    ele.innerHTML = txt;
                    // var txt2 = "<script type='text/javascript'>alert('你被攻击了')<\/script>";
                    // document.write(txt2);
                }, 2000);
            }, 2000);
        </script>
    </body>
</html>